<template>
    <template v-for="menu in menus" :key="menu.menuUrl">
        <!-- 有子菜单的项 -->
        <el-sub-menu v-if="menu.children && menu.children.length" :index="menu.menuUrl">
            <template #title>
                <span @click="handleMenuClick(menu.menuUrl)">{{ menu.menuName }}</span>
            </template>
            <!-- 递归调用自身 -->
            <RecursiveMenu :menus="menu.children" />
        </el-sub-menu>

        <!-- 没有子菜单的项 -->
        <el-menu-item v-else :index="menu.menuUrl">
            <span>{{ menu.menuName }}</span>
        </el-menu-item>
    </template>
</template>
<script setup lang="ts">
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import RecursiveMenu from '@/views/MenuRole.vue'
const router = useRouter()
const props = defineProps({
    menus: {
        type: Array as () => Array<{
            menuUrl: string
            menuName: string
            children?: Array<any>
        }>,
        default: () => []
    }
})

const handleMenuClick = (index: string) => {
    if (index) {
        router.push(index)
    }
}
</script>